<template>
  <ContentWrap>
    <!--    顶部查询项-->
    <el-form :model="form" inline label-width="100px">
      <el-form-item :label="t('miner_firmwareVersion.pid')">
        <el-input
          v-model="form.productname"
          clearable
          :placeholder="'请输入' + t('miner_firmwareVersion.pid')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('miner_firmwareVersion.version_id')">
        <el-input
          v-model="form.version_id"
          clearable
          :placeholder="'请输入' + t('miner_firmwareVersion.version_id')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('miner_firmwareVersion.release_date')" prop="release_date">
        <el-date-picker
          width="100%"
          v-model="form.release_date"
          value-format="YYYY-MM-DD"
          :placeholder="'请选择' + t('miner_firmwareVersion.release_date')"
          type="daterange"
          :shortcuts="shortcuts"
          range-separator="-"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="initialize">查询</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="mb-10px">
      <BaseButton type="primary" @click="AddAction">{{ t('action.add') }}</BaseButton>
    </div>
    <!-- 表格主体 -->
    <el-table
      :data="dataList"
      highlight-current-row
      stripe
      border
      v-loading="tableLoading"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column :label="t('miner_firmwareVersion.id')" prop="id" width="80" />
      <el-table-column
        :label="t('miner_firmwareVersion.pid')"
        :width="calculateColumnWidth(dataList, 'pid_name', 2, 10)"
        prop="pid_name"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('miner_firmwareVersion.version_id')"
        prop="version_id"
        :width="calculateColumnWidth(dataList, 'version_id')"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('miner_firmwareVersion.firmware_fileid')"
        prop="firmware_fileid_url"
        :width="calculateColumnWidth(dataList, 'firmware_fileid_url', 1, 8)"
        :show-overflow-tooltip="true"
      >
        <template #default="{}"> </template>
      </el-table-column>
      <el-table-column
        :label="t('miner_firmwareVersion.release_date')"
        prop="release_date"
        :width="calculateColumnWidth(dataList, 'release_date', 2, 10)"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('miner_firmwareVersion.creator')"
        prop="creator_name"
        :width="calculateColumnWidth(dataList, 'creator')"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        :label="t('miner_firmwareVersion.create_time')"
        prop="create_time"
        :width="calculateColumnWidth(dataList, 'create_time')"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        :label="t('miner_firmwareVersion.updater')"
        prop="updater_name"
        :width="calculateColumnWidth(dataList, 'updater')"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        :label="t('miner_firmwareVersion.update_time')"
        prop="update_time"
        :width="calculateColumnWidth(dataList, 'update_time')"
        :show-overflow-tooltip="true"
      />

      <el-table-column fixed="right" label="操作" min-width="220">
        <template #default="{ row }">
          <el-button @click="handleJump('edit', row)" size="small">
            {{ t('action.edit') }}
          </el-button>
          <el-button type="danger" @click="handleJump('delete', row)" size="small">
            {{ t('action.del') }}
          </el-button>
          <el-button type="success" @click="handleJump('detail', row)" size="small">
            {{ t('action.detail') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <Pagination
      :total="paginationTotal"
      v-model:page="form.pageIndex"
      v-model:limit="form.pageSize"
      @pagination="initialize"
    />
  </ContentWrap>
</template>

<script setup lang="ts">
const { push } = useRouter()
const { t } = useI18n()
import Pagination from '@/components/Pagination/index.vue'
import { ContentWrap } from '@/components/ContentWrap'
import { getListApi, deleteDataApi } from '@/api/operations/miner_firmwareversion/index'
import { calculateColumnWidth } from '@/utils/index'

const tableLoading = ref<boolean>(false)
const dataList = ref<any[]>([])
const paginationTotal = ref<number>(0)

const form = ref<Record<string, any>>({
  productname: '',
  version_id: '',
  release_date: '',
  pageIndex: 1,
  pageSize: 20
})

const reset = () => {
  form.value = {
    productname: '',
    version_id: '',
    release_date: ''
  }
  initialize()
}

//初始化请求
const initialize = async () => {
  tableLoading.value = true
  const params = JSON.parse(JSON.stringify(form.value))
  delete params.date
  const resp = await getListApi(params)
  dataList.value = resp.data.list
  paginationTotal.value = resp.data.total
  tableLoading.value = false
}

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    }
  }
]

onMounted(() => {
  // getDropDownBoxInfo()
  initialize()
})
const AddAction = () => {
  push('/oaperations/firmwareversion/add')
}

//跳转
const handleJump = (type: string, row: Record<string, any>) => {
  if (type === 'delete') {
    ElMessageBox.confirm('确定删除该固件版本吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const resp = await deleteDataApi(row.id)
      if (resp.code === 0) {
        ElMessage.success('删除成功')
        initialize()
      } else {
        ElMessage.error('删除失败')
      }
    })
  } else {
    push({
      path: `/oaperations/firmwareversion/${type}`,
      query: { id: row.id }
    })
  }
}
</script>
